<template>
  <div class="meetingInfo-wrapper">
    <!-- 搜索 -->
    <InfoSearch @InfoSearch="councilRoomSearch" class="info-search">
      <el-input placeholder="请输入会议名称" v-model="meeting_name" class="search-item">
        <template slot="prepend">会议名称</template>
      </el-input>
      <el-input placeholder="请输入会议室名称" v-model="room_name" class="search-item">
        <template slot="prepend">会议室名称</template>
      </el-input>
      <el-input placeholder="请输入会议管理员" v-model="mng_name" class="search-item">
        <template slot="prepend">管理员</template>
      </el-input>
    </InfoSearch>

    <!-- 表格 -->
    <div class="meetingInfo-result-wrapper">
      <div class="port-btn">
        <el-button type="primary" size="small" class="port-btn" @click="addMeeting">新增会议信息</el-button>
      </div>
      <div class="meetingInfo-result">
        <el-table
          :data="meetingInfo"
          stripe
          :cell-style="roomNameCellStyle"
          @row-dblclick="meetingContent"
        >
          <el-table-column prop="meeting_name" label="会议名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="room_name" label="会议地点" header-align="center" align="center"></el-table-column>
          <el-table-column prop="mng_name" label="会议组织者" header-align="center" align="center"></el-table-column>
          <el-table-column prop="mng_tel" label="组织者联系方式" header-align="center" align="center"></el-table-column>
          <el-table-column prop="startTime" label="会议开始时间" header-align="center" align="center"></el-table-column>
          <el-table-column prop="endTime" label="会议结束时间" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" round @click="handleDelete(scope.$index)">删除</el-button>
              <el-button type="primary" size="mini" round @click="handleEdit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :pager-count="pageCount"
            @current-change="currentChange"
            :total="recordNum"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 修改弹框 -->
    <div class="dialog" v-show="visible">
      <div class="updateForm">
        <div class="closeX" @click="closeX">×</div>
        <el-form
          class="changeForm"
          :label-position="labelPosition"
          label-width="90px"
          :model="singleMeeting"
        >
          <el-form-item label="会议名称">
            <el-input v-model="singleMeeting.meeting_name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="会议地点">
            <el-input v-model="singleMeeting.room_name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="会议组织者">
            <el-input v-model="singleMeeting.mng_name"></el-input>
          </el-form-item>
          <el-form-item label="组织者tel">
            <el-input v-model="singleMeeting.mng_tel"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-input v-model="singleMeeting.startTime" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-input v-model="singleMeeting.endTime" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="changeBtn" @click="changeCouncilRoom()">立即修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="dialog" v-show="visibleMeeting">
      <div class="updateForm">
        <div class="closeX" @click="closeX">×</div>
        <el-form
          class="changeForm"
          :label-position="labelPosition"
          label-width="90px"
          :model="addMeetingInfo"
        >
          <el-form-item label="会议名称">
            <el-input v-model="addMeetingInfo.meeting_name" ></el-input>
          </el-form-item>
          <el-form-item label="会议组织者">
            <el-input v-model="addMeetingInfo.mng_name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="addMeetingInfo.mng_tel"></el-input>
          </el-form-item>
          <el-form-item label="会议时间">
                <el-date-picker
                v-model="addMeetingInfo.timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change ="selectChange"
                >
                </el-date-picker>
          </el-form-item>
                    <el-form-item label="会议地点">
            <el-select v-model="addMeetingInfo.room_name" placeholder="请选择">
            <el-option
            v-for="item in roomOptions2"
            :key="item.label"
            :label="item.label"
            :value="item.label"
            :disabled="item.disabled"
            >
            </el-option>
          </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="changeBtn" @click="addRoomChange()">立即新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog
    title="会议记录"
    :visible.sync="visibleContent"
     width="50%"
     close="closeX">
    <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="textarea">
    </el-input>
    <el-button type="primary" class="saveBtn" @click="saveContent()">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import InfoSearch from "comm/InfoSearch.vue";
import Fetch from "mixins/fetch";
import { $_splitField, deepClone } from "@/utils";

export default {
  components: {
    InfoSearch
  },
  data() {
    return {
      visibleMeeting:false,
      visibleContent: false,
      meetingInfo: [],
      recordNum: 0,
      meeting_name: "",
      room_name: "",
      mng_name: "",
      visible: false,
      singleMeeting: {},
      addMeetingInfo: {},
      oldsingleMeeting: {},
      textarea:'',
      roomOptions:[],
      roomOptions2:[],
      row:'',
      appointInfo:[],
      cantChoose:[],
    };
  },
  mixins: [Fetch],
  created() {
    this.init('');
    this.getRoomName();
    this.getAppoInfo();
  },
  methods: {
    init (params) {
    this.labelPosition = "left";
    this.pageSize = 8;
    this.pageCount = 5;
    // 获取页面初始数据
    this.$_fetch_meetingInfoList(this.$qs.stringify({...params})).then(res => {
      this.meetingInfo = res.data;
      this.recordNum = res.data.length;
    });
    },
    getAppoInfo () {
      this.$_fetch_meetingInfoList().then(res => {
        if (res.code === 0) {
          const data = res.data;
          const nowTime = new Date().getTime();
          for (let val of data) {
            const sttime = new Date(val.startTime).getTime();
            if ( sttime - nowTime > 0) {
              this.appointInfo.push(val);
            }
          }
        }
      }).catch(()=> {
        this.$message({
            type: "warn",
            message: "请求数据失败,检查重试"
          })
      });
    },
    getRoomName () {
      this.$_fetch_getRoomName().then(res => {
          if(res.code === 0) {
            for(let i=0;i<res.data.length;i++) {
              this.roomOptions.push({label:res.data[i],value:i});
            }
          }
    });
    },
    // 选择时间确定
    selectChange(){
      console.log(11111111);
      let startT = new Date(this.addMeetingInfo.timeValue[0]).getTime();
      let endT = new Date(this.addMeetingInfo.timeValue[1]).getTime();
      for(let val of this.appointInfo) {
        const s = new Date(val.startTime).getTime();
        const e = new Date(val.endTime).getTime();
        if(startT - s > 0 && e - startT >0) {
          this.cantChoose.push(val.room_name);
          continue;
        } else if( endT -s >0 && e- endT>0) {
          this.cantChoose.push(val.room_name);
          continue;
        }
      }
      for(let val of this.roomOptions) {
        for(let val2 of this.cantChoose) {
            if(val.label === val2) {
              val.disabled = true;
            }
        }
      }
      this.roomOptions2 = this.roomOptions;
      console.log(this.cantChoose,this.roomOptions);
    },
    // 修改表格第一列样式
    roomNameCellStyle({ columnIndex }) {
      let textCenter = "text-align: center;";
      if (columnIndex === 0) {
        return textCenter + "color: blue; cursor:pointer;";
      }
      return textCenter;
    },
    // 
    meetingContent(row, event) {
        this.row = row;
        this.textarea = row.meeting_content;
        this.visibleContent = true;
    },
    // 条件查询
    councilRoomSearch() {
      const params = {};
      if(this.meeting_name) {
        params.meeting_name = this.meeting_name
      }
      if(this.room_name) {
        params.room_name = this.room_name
      }
      if(this.mng_name) {
        params.mng_name = this.mng_name
      }
      this.init(params);
    },
    // 打开新增会议信息
    addMeeting() {
      this.addMeetingInfo = {};
      this.visibleMeeting = true;
    },
    // 新增操作
    addRoomChange() {
      var d = new Date(this.addMeetingInfo.timeValue[0]);  
      const startTime =d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
      var d2 = new Date(this.addMeetingInfo.timeValue[1]);  
      const endTime =d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate() + ' ' + d2.getHours() + ':' + d2.getMinutes() + ':' + d2.getSeconds(); 
      this.$_fetch_addMeetingInfo(this.$qs.stringify({...this.addMeetingInfo,startTime,endTime})).then(res=>{
        if(res.code === 0 ) {
          this.$message({
            type: "info",
            message: "会议信息新增成功"
          });
          this.visibleMeeting = false;
          this.init();
        }
      }).catch(()=>{
            this.$message({
            type: "warn",
            message: "请完整填写信息"
          })
      }
      )
    },
    // 分页
    currentChange(num) {
      this.$_fetch_meetingInfo({
        pageNum: num,
        roomName: this.councilRoomName,
        roomPeople: this.containPopulation,
        roomManager: this.councilRoomAdministrator
      }).then(res => {
        this.meetingInfo = res.pageBean.dataList;
        this.recordNum = res.pageBean.recordNum;
        $_splitField(this.meetingInfo);
      });
    },
    // 删除会议信息
    handleDelete(index) {
      this.$confirm(
        `此操作将删除"${
          this.meetingInfo[index].meeting_name
        }"会议, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          return this.$_fetch_delMeetingInfo(this.$qs.stringify({
            id: this.meetingInfo[index].id
          }));
        })
        .then(res => {
          if (res.code === 0) {
            this.meetingInfo.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.init();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 弹出修改框
    async handleEdit(councilRoom) {
      this.visible = true;
      this.oldsingleMeeting = councilRoom;
      this.singleMeeting = await deepClone(councilRoom);
    },
    // 修改会议信息
    changeCouncilRoom() {
      this.$_fetch_editMeetingInfo(this.$qs.stringify({...this.singleMeeting})).then(res => {
        if (res.code===0) {
          for (let key in this.oldsingleMeeting) {
            this.oldsingleMeeting[key] = this.singleMeeting[key];
          }
          this.visible = false;
          this.$message({
            message: "修改成功！",
            type: "success"
          });
          this.init();
        }
      });
    },
    // 关闭修改弹窗
    closeX() {
      this.visible = false;
      this.visibleMeeting = false;
      this.visibleContent = false;
    },
    saveContent(){
        this.row.meeting_content = this.textarea;
        this.$_fetch_editMeetingInfo(this.$qs.stringify({...this.row})).then(res => {
        if (res.code===0) {
          this.visibleContent = false;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.meetingInfo-wrapper {
  position: relative;
  .info-search {
    .search-item {
      margin-top: 5px;
      margin-left: 5px;
      width: 300px;
    }
  }
  .meetingInfo-result-wrapper {
    .port-btn {
      border-top: 1px solid #ccc;
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: right;
    }
    .meetingInfo-result {
      text-align: center;
      .pagination {
        margin-top: 20px;
      }
    }
  }
  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.7);
    .updateForm {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      margin-left: -250px;
      margin-top: -225px;
      background-color: #eee;
      border: 1px solid #333;
      .closeX {
        position: absolute;
        top: 15px;
        right: 20px;
        width: 30px;
        height: 30px;
        text-align: center;
        font-size: 38px;
        color: #f56c6c;
        cursor: pointer;
      }
      .changeForm {
        margin: 60px 50px 50px;
        .changeBtn {
          margin-left: 10%;
        }
      }
    }
  }
  .saveBtn {
      margin-left: 45%;
      margin-top:50px;
  }
}
</style>